extends ../layout

block content
  .container
    .row
      .col-md-offset-3.col-md-6.text-center
        include ../includes/message
  .container

    h2
      i.fa.fa-pencil-square-o
      |  编辑名片
    hr
    .row
      .col-md-4
        .text-center
          - var avatar_src = card.avatar.source ? "/uploads/avatar/" + card.avatar.source : "//placehold.it/140";
          img.avatar.img-thumbnail.img-circle.center-block.img-responsive(src=avatar_src, style="width: 140px; height: 140px;")
          br
          .btn-group
            a.btn.btn-default#avatar_btn(href="/card/"+card.id+'/avatar')
              span.fa.fa-fw.fa-smile-o
              |  设置头像
            a.btn.btn-default.dropdown-toggle#menu_btn(data-toggle="dropdown")
              span.fa.fa-caret-down
            ul.dropdown-menu
              li
                a(href="./"+card.id+"/location")
                  span.fa.fa-fw.fa-map-marker
                  |  标注地图位置
              li
                a(href="./"+card.id+"/template")
                  span.fa.fa-fw.fa-magic
                  |  选择主题风格
              li
                a(href="/card/"+card.id+'/share')
                  span.fa.fa-fw.fa-qrcode
                  |  查看二维码
              li
                a(href="/card/"+card.id+'/share')
                  span.fa.fa-fw.fa-share
                  |  分享

          hr.hidden-md.hidden-lg
      .col-md-8
        //- h4.text-muted.hidden-lg.hidden-md 文字内容：
        form.form-horizontal#create_card_form(method="post", role="form")
          //- fieldset
            //- h6.text-muted(title="您的个人信息不会透漏给任何不被信任的第三方，请放心填写。") 基本信息 &nbsp;

          .form-group
            label.control-label.col-md-2(for="name")
              spans.text-danger [必填]
              |  姓名：
            .col-md-7
              if card.name
                input.form-control(type="text", id="name", name="name", placeholder="", required, value=card.name)
              else
                input.form-control(type="text", id="name", name="name", placeholder="", required, autofocus)
          .form-group
            label.control-label.col-md-2(for="company") 公司：
            .col-md-7
              input.form-control(type="text", id="company", name="company", placeholder="公司或组织的全称", value=card.company)
          .form-group
            label.control-label.col-md-2(for="position") 职位：
            .col-md-7
              input.form-control(type="text", id="position", name="position", placeholder="职位或职务", value=card.position)
          //- fieldset
            h6.text-muted 联系方式
          hr
          .form-group
            label.control-label.col-md-2(for="mobile") 手机：
            .col-md-7
              input.form-control(type="text", id="mobile", name="mobile", placeholder="18345600019", value=card.mobile)
          //- .form-group
            label.control-label.col-md-2(for="phone") 座机：
            .col-md-7
              input.form-control(type="text", id="phone", name="phone", placeholder="000012345678", value=card.phone)
          .form-group
            label.control-label.col-md-2(for="email") 电子邮箱：
            .col-md-7
              input.form-control(type="email", id="email", name="email", placeholder="name@example.com", value=card.email)
          .form-group
            label.control-label.col-md-2(for="site") 网址：
            .col-md-7
              input.form-control(type="url", id="site", name="site", placeholder="blog.yourhost.com 网站或博客", value=card.site)

          //- .form-group#address_1
            label.control-label.col-md-2 城市：
            .col-md-2
              .ui-select
                select.form-control#province.prov(name="prov")
            .col-md-2
              .ui-select
                select.form-control#city.city(name="city", disabled)
            //- .col-md-3
              .ui-select
                select.form-control#district.dist(name="district", disabled)
          - var marked = card.location.length
          .form-group
            label.control-label.col-md-2(for="address") 地址：
            .col-md-7
              .input-group
                input.form-control(type="text", id="address", name="address", placeholder="街道楼座门牌", value=card.address)
                span.input-group-addon
                  if marked
                    i.fa.fa-map-marker.text-danger(title="地图已标注")
                    //- |  已标注
                  else
                    i.fa.fa-map-marker.text-muted(title="地图未标注")
                    //- |  未标注
          //- fieldset
            h6.text-muted 社交账号
          hr
          .form-group
            label.control-label.col-md-2(for="qq") QQ：
            .col-md-7
              input.form-control(type="text", id="qq", name="qq", placeholder="12345678", value=card.qq)
          .form-group
            label.control-label.col-md-2(for="weixin") 微信：
            .col-md-7
              input.form-control(type="text", id="weixin", name="weixin", placeholder="weixin", value=card.weixin)
          .form-group
            label.control-label.col-md-2(for="weibo") 新浪微博：
            .col-md-7
              input.form-control(type="text", id="weibo", name="weibo", placeholder="@sinaweibo", value=card.weibo)
          //- fieldset
            h6.text-muted 个性化
          hr
          .form-group
            label.control-label.col-md-2(for="bio") 个性签名：
            .col-md-7
              textarea.form-control(type="text", id="bio", name="bio", placeholder="写一段简介或个性签名，更好的展示自己", rows="4")= card.bio
          //- .form-group
          //-   label.control-label.col-md-2(for="weibo") 名片风格：
          //-   .col-md-5
          //-     .ui-select
          //-       select.form-control(name="tempalte")
          //-         option(value="templ0") 简洁封面
          //-         option(value="templ1") 休闲时光
          //-         option(value="templ2" selected) 美丽风景
          //-   .col-md-2
          //-     a.btn.btn-primary.btn-block(href="./"+card.id+"/template") 浏览主题

          //- hr
          .form-group
            label.control-label.col-md-2
            .col-md-7
              button#sync.btn.btn-success(type="submit") 同 步 名 片&nbsp;
                i.fa.fa-fresh
              span &nbsp;&nbsp;
              a.btn.btn-default(href="/") 取 消

append scripts
  //- script(type="text/javascript", src="/javascripts/jquery.cityselect.js")
  script.
    $(document).ready(function() {
      if (!$('#name').val()) {
        $('#avatar_btn').addClass('disabled');
        $('#menu_btn').addClass('disabled');
      }

      $('#name').change(function (event) {
        $('#sync').toggleClass('disabled', !$(this).val());
      });
    });
  script(type="text/javascript", src="//cdn.staticfile.org/jquery-validate/1.12.0/jquery.validate.min.js")
  script.
    $("#create_card_form").validate({
      //- debug: true,
      errorClass: "input-error text-danger",
      errorElement: "i",
      rules: {
        name: {
          required: true,
          maxlength: 20
        },
        email: {
          email: true
        },
        site: {
          url: true
        },
        qq: { minlength: 4, maxlength: 11 },
        bio: {
          maxlength: 140
        }
      },
      messages: {
        name: {
          required: "请填写姓名",
          maxlength: "暂不支持20个字以上的名字"
        },
        email: {
          email: "填写的邮箱格式不正确"
        },
        site: {
          url: "网址格式不正确, 请以 http:// 开头"
        },
        qq: "QQ号码格式不正确",
        bio: {
          maxlength: "已超过140字限制"
        }
      }
    });

  //- script.
    $(function (){
      $("#address_1").citySelect({
        prov:"北京",
        city:"宣武区"
        //- nodata:"none"
      });
    });